/**
 * Created by Ren on 2015/5/7.
 */
var webSocketGame = {
    can:null,   //游戏所用到的canvas对象
    ctx:null,    //绘图所用到的canvas渲染上下文对象
    isDrawing:false, //控制是否可以开始绘制
    canvasTop:0,    //canvas的上边距
    canvasLeft:0,    // canvas的左边距
    startX:0,   // 起点X
    startY:0,    // 起点Y
    ws:null     // webSocket对象
};

// 页面初始化工作
$(function(){
    // 得到游戏中的canvas
   webSocketGame.can = $("#drawing-pad");
/*    alert(webSocketGame.can);*/
    // 得到渲染上下文
   webSocketGame.ctx = webSocketGame.can[0].getContext("2d");
/*    alert(webSocketGame.ctx);*/
   webSocketGame.ctx.strokeStyle = "red";
   webSocketGame.ctx.lineWidth = 2;
   // 连接服务器
   if(window.WebSocket)
   {
       webSocketGame.ws = new WebSocket("ws://127.0.0.1:6999");
       webSocketGame.ws.onopen=function()
       {
            console.log('open');
       };
       webSocketGame.ws.onclose=function()
       {
            console.log("close");
       };
       webSocketGame.ws.onerror=function()
       {
            console.log("error");
       };
       webSocketGame.ws.onmessage=function(msg)
       {
           var message = JSON.parse(msg.data);
           switch (message.type)
           {
               case dataType.chatMessage:
                   alert(message.content);
                   break;
               // 处理绘图消息
               case dataType.drawMessage:
                   drawLine(message.startX, message.startY, message.endX, message.endY, message.color);
                   break;
               // 处理令牌消息
               case dataType.tokenMessage:
/*                   alert(message.hasToken);*/
                   if(message.hasToken)
                   {
                       readToDraw();
                   }
                   break;
           }
       };
   }
});
function readToDraw()
{
    // 绑定事件
    webSocketGame.can.mousedown(function(e){
        // e.pageX,e.pageY   相对浏览器的坐标
        //webSocketGame.can.offset().left;   对象相对浏览器的左边距
        //webSocketGame.can.offset().top;   对象相对浏览器的上边距
        console.log("start...");
        webSocketGame.isDrawing = true;
        // 得到canvas的边距
        webSocketGame.canvasLeft = webSocketGame.can.offset().left;
        webSocketGame.canvasTop = webSocketGame.can.offset().top;
        webSocketGame.startX = e.pageX - webSocketGame.canvasLeft;
        webSocketGame.startY = e.pageY - webSocketGame.canvasTop;
    }).mousemove(function(e){
        if(webSocketGame.isDrawing)
        {
            console.log("draw...");
            var currentX = e.pageX - webSocketGame.canvasLeft;
            var currentY = e.pageY - webSocketGame.canvasTop;
            drawLine(webSocketGame.startX, webSocketGame.startY, currentX, currentY, webSocketGame.ctx.strokeStyle);
            draw_Message.startX = webSocketGame.startX;
            draw_Message.startY = webSocketGame.startY;
            draw_Message.endX = currentX;
            draw_Message.endY = currentY;
            draw_Message.color = webSocketGame.ctx.strokeStyle;
            draw_Message.width = webSocketGame.ctx.lineWidth;
            webSocketGame.ws.send(JSON.stringify(draw_Message));
            // 更新画图的起点
            webSocketGame.startX = currentX;
            webSocketGame.startY = currentY;
        }
    }).mouseup(function(){
        console.log("end...");
        webSocketGame.isDrawing = false;
    });
}
// 绘图
function drawLine(x1, y1, x2, y2, color)
{
    webSocketGame.ctx.beginPath();
    webSocketGame.ctx.strokeStyle = color;
    webSocketGame.ctx.moveTo(x1, y1);
    webSocketGame.ctx.lineTo(x2, y2);
    webSocketGame.ctx.stroke();
    webSocketGame.ctx.closePath();
}